import styles from './index.module.scss'
import { Card, Form, Input, Button, Checkbox, message } from 'antd';
import logo from '@/assets/logo.png'
import { useDispatch, } from 'react-redux'
import { login } from '@/store/actions/login'
import { useHistory, useLocation } from 'react-router-dom';
import { useState } from 'react';
export default function Login() {
    const dispatch = useDispatch()
    const history = useHistory()
    const location = useLocation()
    // console.log(location);
    //
    const [loading, setLoading] = useState(false)
    const onFinish = async ({ mobile, code }) => {
        // console.log(values);
        try {
            //异步 等登录结束后才往后走
            setLoading(true)
            await dispatch(login(mobile, code))
            message.success('登录成功', 3, () => {
                // if (location.state) {
                //     history.push(location.state.from)
                // } else {

                //     history.push('/home')
                // }
                const { from } = location.state || { from: '/home' }
                history.replace(from)
                // setLoading(false)
            })

        } catch (err) {
            // console.log(err.response);
            message.error('手机号或验证码有误', () => {
                setLoading(false)
            })
        }
    }
    return (
        <div className={styles.root}>
            <Card className="login-container">
                <img className="login-logo" src={logo} alt="" />
                <Form
                    initialValues={{
                        mobile: '13911111111',
                        code: '246810',
                        isAgree: true,
                        remember: true,
                    }}//表单初始值,方便开发
                    onFinish={onFinish}//验证成功后的回调函数
                    validateTrigger={['onChange', 'onBlur']}
                    size='large'
                    // name="basic"//给form表单起了个basic名字
                    autoComplete="off"//输入提示
                >
                    <Form.Item
                        name='mobile'
                        rules={[
                            {
                                required: true,
                                message: '手机号不能为空'
                            },
                            {
                                pattern: /^1[3-9]\d{9}$/,
                                message: '手机号格式错误'

                            }
                        ]}
                    >

                        <Input placeholder='请输入手机号' />
                    </Form.Item>

                    <Form.Item
                        name='code'
                        rules={[
                            {

                                required: true,
                                message: '手机验证码不能为空',
                            },
                            {
                                pattern: /^\d{6}$/,
                                message: '手机验证码格式错误'
                            }
                        ]}
                    >

                        <Input placeholder='请输入手机验证码' />
                    </Form.Item>

                    <Form.Item
                        valuePropName='checked'//拿值的时候不要去拿value里面的值要拿checked
                        name='isAgree'
                        rules={[
                            {

                                validator(rule, value) {
                                    if (value === true) {
                                        return Promise.resolve()
                                    } else {
                                        return Promise.reject(new Error('请阅读并同意「用户协议」和「隐私条款'))
                                    }
                                }
                            }
                        ]}
                    >
                        <Checkbox>我已阅读并同意「用户协议」和「隐私条款」</Checkbox>
                    </Form.Item>

                    <Form.Item>
                        {/* 要校验需要设置提交按钮 htmlType='submit */}
                        <Button block type="primary" htmlType="submit" loading={loading}>
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
        </div >
    )
}
